<template>
  <div class="page-header" :class="{'bgno':!bgShow}">
    <div v-if="showBack" class="back" @click="back"></div>
    <p>{{title}}</p>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {}
  },
  props: {
    showBack: {
      type: Boolean,
      default: true
    },
    bgShow: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    back() {
      this.$router.back(-1)
    }
  }
}
</script>

<style scoped lang="less">
  .page-header{
    position: relative;
    z-index: 10;
    width: 100%;
    height: 84px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #419eff;
    &.bgno{
      background-color: transparent;
    }
    p{
      font-size: 34px;
	    color: #ffffff;
    }
    .back{
      position: absolute;
      top: 21px;
      left: 30px;
      width: 20px;
      height: 38px;
      background: url('../assets/image/icon_arrow_left.png') no-repeat center / 100%;
    }
  }
</style>
